<template>
  <!-- 表格 -->
  <el-table class="musicTable" :data="musicListDetail.tracks" size="mini" style="width: 100%" @row-dblclick="handleDbClick" @cell-click="handleCellClick" highlight-current-row stripe lazy>
    <el-table-column label="" width=" 40" type="index" :index="handleIndex">
    </el-table-column>
    <el-table-column label="" width="23">
      <!-- 下载按钮 -->
      <i class="iconfont icon-download"></i>
    </el-table-column>
    <el-table-column prop="name" label="音乐标题" min-width="350">
    </el-table-column>
    <el-table-column prop="ar[0].name" label="歌手" min-width="120">
    </el-table-column>
    <el-table-column prop="al.name" label="专辑" min-width="170">
    </el-table-column>
    <el-table-column prop="dt" label="时长" min-width="100">
    </el-table-column>
  </el-table>
</template>

<script>
let tableDom
import { reqSongsUrl } from '@/network/api.js'
import { useStore } from 'vuex'
import { onMounted, nextTick, watch, inject } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'DetailTable',
  props: {
    musicListDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  setup(props) {
    const store = useStore()
    const route = useRoute()
    const msg = inject('$message')
    const handleDbClick = row => {
      store.commit('updateMusicId', row.id)
      if (props.musicListDetail.id !== store.state.musicListId) {
        store.commit('updateMusicList', {
          musicListId: props.musicListDetail.id,
          musicList: props.musicListDetail.tracks
        })
      }
    }
    const handleIndex = i => {
      i = i + 1
      return (i + '').padStart(2, '0')
    }
    const handleCellClick = async (row, column, cell) => {
      if (cell.querySelector('.icon-download')) {
        let res = await reqSongsUrl(row.id)
        console.log(res)
        if (res.data[0].url == null) {
          msg.error('暂时无法获取该资源')
          return
        }
        const musicUrl = res.data[0].url
        let url = musicUrl.match(/\http.*?\.net/)[0]
        let serve = url.match(/http:\/(\S*).music/)
        console.log(serve)
        const arr = ['/m7', '/m701', '/m8', '/801']
        if (arr.indexOf(serve[1]) === -1) {
          msg.error('不在服务器礼包中')
          return
        }
        const params = musicUrl.slice(url.length)
        const downloadMusicInfo = {
          name: row.name + '-' + row.ar[0].name + '.' + res.data.type.toLowerCase(),
          url: serve + params
        }
        store.commit('updateDownloadMusicInfo', downloadMusicInfo)
      }
    }

    const handleDOM = (current, last) => {
      if (tableDom == null) {
        console.log('zou')
        tableDom = document.querySelector('.musicTable  tbody')
      }
      console.log(tableDom)
      const tableRows = tableDom.querySelectorAll('.el-table__row')
      const i = props.musicListDetail.tracks.findIndex(item => item.id == current)

      if (i !== -1) {
        const cellDom = tableRows[i].children[0].querySelector('.cell')
        cellDom.innerHTML = `<div><i class="iconfont currentRow icon-yinliang"></i></div>`
      }
      // 清除上一首的样式
      if (last) {
        let lastI = props.musicListDetail.tracks.findIndex(item => item.id == last)
        console.log(lastI)
        if (lastI !== -1) {
          const cellDom = tableRows[lastI].children[0].querySelector('.cell')
          cellDom.innerHTML = `<div>${(lastI + 1 + '').padStart(2, '0')}</div>`
        }
      }
    }
    watch(
      () => store.state.musicId,
      (current, last) => {
        handleDOM(current, last)
      }
    )
    onMounted(() => {
      if (route.params.id == props.musicListDetail.id) {
        nextTick(() => {
          handleDOM(store.state.musicId)
        })
      }
    })

    return { handleCellClick, handleDbClick, handleIndex }
  }
}
</script>

<style scoped>
/* .currentRow {
  color: var(--red);
} */
</style>